<template>
  <div class="g-card" v-loading="loading" :style="{height: loading ? '80px': 'auto'}">
    <div class="search">
      <template v-for="item in options">
        <div class="demo-input" :key="item.id" v-if="queryList.indexOf(item.prop) != -1">
          {{ item.label }}
          <template v-if="item.type == 0">
            <el-date-picker v-model="item.value" placeholder="选择日期" type="date"></el-date-picker>
          </template>
          <template v-else-if="item.label == '年龄区间'">
            <el-input v-model="message.minAge" placeholder="最小年龄" @input="minAge">
            </el-input>
            <span>—</span>
            <el-input v-model="message.maxAge" placeholder="最大年龄" @blur="testAge" @input="maxAge">
            </el-input>
          </template>
          <template v-else-if="item.label == '管理机构'">
            <mechanism-cascader style="margin-left: 20px; width: 220px" :deptId.sync="item.value">
            </mechanism-cascader>
          </template>
          <template v-else-if="item.label == '跟进人'">
            <el-select v-model="item.value" clearable filterable placeholder="请选择">
              <el-option v-for="item in followerList" :key="item.userId" :label="item.userName" :value="item.userId"></el-option>
            </el-select>
          </template>
          <template v-else-if="!item.list">
            <el-input v-model="item.value" placeholder="请输入">
            </el-input>
          </template>
          <template v-else>
            <el-select v-model="item.value" clearable placeholder="请选择">
              <el-option v-for="dict in item.list" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
            </el-select>
          </template>
        </div>
      </template>
      <div v-if="!isSearch" class="search-btn">
        <el-button icon="el-icon-search" type="primary" @click="search()">查询</el-button>
        <el-button icon="el-icon-refresh" type="info" plain @click="searchReset()">重置</el-button>
        <el-button type="info" @click="openScreenList">
          <svg-icon class="shuai" iconClass="shuaixuan"></svg-icon>
          筛选模板
        </el-button>
      </div>
    </div>
    <div v-if="isSearch" class="search-button">
      <el-button icon="el-icon-search" type="primary" @click="search()">查询</el-button>
      <el-button icon="el-icon-refresh" type="info" plain @click="searchReset()">重置</el-button>
      <el-button type="info" @click="openScreenList">
        <svg-icon class="shuai" iconClass="shuaixuan"></svg-icon>
        筛选模板
      </el-button>
    </div>
  </div>
</template>

<script>
// import mechanismCascader from '@/components/mechanismCascader.vue'
import mechanismCascader from '@/components/mechanismCascaderCode.vue'
import { getAllWeUser, getCanAbleFieldList } from '@/api/customer/customerManage'
import { getSource } from '@/api/sourceManage/sourceManage'

export default {
  props: {
    isMyCus: {
      type: Boolean,
      default: false
    }
  },
  components: {
    mechanismCascader
  },
  data() {
    return {
      loading: false,
      queryList: [],
      isSearch: false,
      message: {
        minAge: null,
        maxAge: null
      },
      // 下拉列表选项
      genderOptions: [],
      organizationList: [],
      followerList: [],//跟进人列表
      modeList: [],
      stateList: [],
      stageOptions: [],
      // 传给父组件的数据
      options: [
        { label: '客户号', prop: 'sid', id: '1', value: '' },
        { label: '姓名', prop: 'name', id: '3', value: '' },
        { label: '年龄区间', prop: 'age', id: '0', value: '' },
        { label: '性别', prop: 'gender', id: '8', value: '', list: [] },
        { label: '管理机构', prop: 'departmentId', id: '100', value: null },
        { label: '获客来源', prop: 'customerWay', id: '5', value: '', list: [] },
        { label: '跟进人', prop: 'sysUserId', id: '31', value: '', list: [] },
        { label: '企微添加状态', prop: 'wecomAddState', id: '41', value: '', list: [] },
        { label: '跟进阶段', prop: 'followStage', id: '30', value: '', list: [] }
      ]
    }
  },
  mounted() {
    this.getCanAbleFieldListFn()
    this.getOptionsList()
    this.getLabelList()
    if (this.isMyCus) {
      this.options = this.options.filter(item => item.label != '跟进人')
    }
  },
  watch: {
    options() {
      this.options.length % 4 == 0 ? this.isSearch = true : this.isSearch = false
      console.log(this.isMyCus, '..................')
    }
  },
  methods: {
    getCanAbleFieldListFn() {
      this.loading = true;
      getCanAbleFieldList().then(res => {
        if (res.code == 200) {
          this.queryList = res.data;
        }
        this.loading = false;
      })
    },
    // 年龄输入框限制
    minAge() {
      if (!/^[0-9]+$/.test(this.message.minAge)) {
        this.message.minAge = this.message.minAge.replace(/\D/g, '')
      }

      if (this.message.minAge > 100) this.message.minAge = 100
      if (this.message.minAge < 0) this.message.minAge = null
    },
    maxAge() {
      if (!/^[0-9]+$/.test(this.message.maxAge)) {
        this.message.maxAge = this.message.maxAge.replace(/\D/g, '')
      }

      if (this.message.maxAge > 100) this.message.maxAge = 100
      if (this.message.maxAge < 0) this.message.maxAge = null
    },
    testAge() {
      if (Number(this.message.minAge) > Number(this.message.maxAge)) {
        this.message.maxAge = null
        this.$message.error('最大年龄不得小于最小年龄')
      }

    },
    openScreenList() {
      this.$parent.openDialogLeft()
    },
    getLabelList() {
      const searchList = JSON.parse(sessionStorage.getItem('searchList')) || []
      if (searchList.length > 0) {
        this.options = searchList
      }
      if (this.isMyCus) {
        this.options = this.options.filter(item => item.label != '跟进人')
      }
    },
    getOptionsList() {
      // 获取跟进人列表
      const params = {
        department: '',
        userName: ''
      }
      getAllWeUser(params).then(res => {
        if (res.code === 200) {
          this.followerList = res.data || []
        }
      }).catch(() => {
        console.log('error submit!!')
      })
      this.options.forEach(item => {
        if (item.label == '性别') {
          item.list = [
            { dictValue: '0', dictLabel: '未知' },
            { dictValue: '1', dictLabel: '男' },
            { dictValue: '2', dictLabel: '女' }
          ]
        } else if (item.label == '企微添加状态') {
          item.list = [
            { dictValue: '0', dictLabel: '待添加' },
            { dictValue: '1', dictLabel: '已添加' },
            { dictValue: '2', dictLabel: '已删除' }
          ]
        } else if (item.label == '获客来源') {
          getSource().then((res) => {
            const arr = []
            res.rows.forEach(item => {
              arr.push(
                {
                  dictValue: item.scrmGetGuestSourceId,
                  dictLabel: item.scrmSourceName
                }
              )
            })
            item.list = arr
          })
        } else if (item.label == '跟进阶段') {
          this.getDicts('follow_states').then((res) => {
            if (res.code === 200) {
              item.list = res.data
            }
          })
        }
      })
    },
    // 查询
    search() {
      var obj = {}
      this.options.forEach(element => {
        if (element.label != '年龄区间') {
          obj[element.prop] = element.value
        }
      })
      const sendMessage = {
        ...this.message,
        ...obj
      }
      this.$emit('sendMessage', sendMessage)
    },
    // 重置
    searchReset() {
      this.message = {
        minAge: null,
        maxAge: null
      }
      this.options.forEach((item) => {
        item.value = null
      })
      this.$emit('sendMessage', this.message)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../../styles/element-ui.scss";

.search {
  display: flex;
  padding: 10px 0 10px 20px;
  flex-wrap: wrap;
  position: relative;

  .demo-input {
    width: 25%;
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 0;

    .el-input {
      margin-left: 20px;
      flex: 1;
    }

    span {
      margin-left: 20px;
    }

    .el-select {
      width: 100%;
      flex: 1;
      margin-left: 20px;
    }

  }

}

.el-button--info:hover {
  border-color: #c5b5b5;
}

.el-cascader--small {
  width: 100%;
  flex: 1;
  margin-left: 20px;
}

.search-button {
  text-align: right;
  padding: 0 20px 15px;
}

.search-btn {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
</style>
